<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--创建画布-->
<canvas id="myCanvas" width="900" height="900" style="background-color: black" </canvas>
<!--绘制时钟-->
<script>
  var myCan = document.getElementById("myCanvas");
// 设置画笔
var ct = myCan.getContext("2d");


// 设置定时函数让时钟动起来
  setInterval(function () {

    // 获取本机时间
    var date=new Date();
    var h = date.getHours();
    // 由于获取的是24小时制
    var newh=h>12?h-12:h;
    var m = date.getMinutes();
    var s = date.getSeconds();

    // 时针固定公式
  newh+=m/60;

  // 清除
    ct.clearRect(0,0,900,900);

    // 插入画布
    // 创建图片对象
    var img=new Image();
    // 设置图片路径
    img.src="../../img/5.5/clock.jpg";
    // drawImage()
    ct.drawImage(img,0,0);

// 1.绘制表盘
  ct.beginPath();
  ct.arc(400,320,300,0,2*Math.PI,false);
  ct.strokeStyle="aqua";
  ct.lineWidth=8;
  ct.stroke();
  ct.closePath();

  // 截取
  ct.clip();

  // 2.绘制时针
  ct.beginPath();
  ct.save();
  ct.translate(400,320);
    // 让时针动起来
    ct.rotate(30*newh*Math.PI/180);
  ct.moveTo(0,0);
  ct.lineTo(0,-180);
  ct.strokeStyle="blue";
  ct.lineWidth=6;
  ct.stroke();
  ct.restore();
  ct.closePath();

  // 3.绘制分针
  ct.beginPath();
  ct.save();
  ct.translate(400,320);
    // 让分针动起来
    ct.rotate(6*m*Math.PI/180);
  ct.moveTo(0,0);
  ct.lineTo(0,-200);
  ct.strokeStyle="yellow";
  ct.lineWidth=4;
  ct.stroke();
  ct.restore();
  ct.closePath();

  // 4.绘制秒针
  ct.beginPath();
  ct.save();
  ct.translate(400,320);
    // 让秒针动起来
    ct.rotate(6*s*Math.PI/180);
  ct.moveTo(0,0);
  ct.lineTo(0,-220);
  ct.strokeStyle="red";
  ct.lineWidth=2;
  ct.stroke();
  ct.restore();
  ct.closePath();

  // 4-1.绘制秒针下面的圆
  ct.beginPath();
  ct.save();
  ct.translate(400,320);
    // 让秒针下面的圆动起来
    ct.rotate(6*s*Math.PI/180);
  ct.arc(0,-200,5,0,2*Math.PI,false);
  ct.strokeStyle="red";
  ct.lineWidth=2;
  ct.fillStyle="yellow";
  ct.fill();
  ct.stroke();
  ct.restore();
  ct.closePath();

  // 4-2.绘制秒针上面的圆
  ct.beginPath();
  ct.save();
  ct.translate(400,320);
  ct.arc(0,0,5,0,2*Math.PI,false);
  ct.strokeStyle="red";
  ct.lineWidth=2;
  ct.fillStyle="yellow";
  ct.fill();
  ct.stroke();
  ct.restore();
  ct.closePath();


  // 5.绘制刻度
// 5-1.绘制时针刻度:12个,每个之间角度差为30度
  ct.beginPath();
  ct.save();
  ct.translate(400,320);
  // 循环刻度,每隔30度绘制一个一样的刻度
  for(var i=0;i<=12;i++){
    // 旋转30度
    ct.rotate(30*Math.PI/180);
  ct.moveTo(0,300);
  ct.lineTo(0,270);
  ct.strokeStyle="yellow";
  ct.lineWidth=8;
  ct.stroke();
  }
  ct.restore();
  ct.closePath();
// 5-2.绘制分针与秒针刻度:60个,每个之间角度差为6度
  ct.beginPath();
  ct.save();
  ct.translate(400,320);
  // 循环刻度,每隔6度绘制一个一样的刻度
  for(var i=0;i<=60;i++){
    // 旋转6度
    ct.rotate(6*Math.PI/180);
    ct.moveTo(0,300);
    ct.lineTo(0,285);
    ct.strokeStyle="yellow";
    ct.lineWidth=6;
    ct.stroke();
  }
  ct.restore();
  ct.closePath();

  },1000);

</script>
</body>
</html>
